<template>
    <div class="haders">
        <img class="dibu" src="/static/dibu.png" />
        <div class="nei">
            <img class="wlogo" @click="gohome" src="/static/wlogo.png" />
            <div class="gongsi">{{ config.company_name || '上海康得新晨诺光学材料有限公司' }}</div>
            <div class="fuwu">
                <div>
                    服务热线: {{ config.service_phone || '400-100-2450' }} ({{ config.service_time || '周一至周五9:00-17:00' }})
                </div>
            </div>
            <div class="over22w">
                <div class="lefts">
                    <div class="centern flexss">
                        <div>产品中心</div>
                        <div>服务中心</div>
                        <div>关于我们</div>
                    </div>
                    <div class="left_n flexss">
                        <div>
                            <div @click="$router.push('/windowmembrane')">汽车窗膜</div>
                            <div @click="$router.push('/paintprotection')">漆面保护膜</div>
                            <div @click="$router.push('/construction')">建筑和家居膜</div>
                        </div>
                        <div>
                            <div @click="goWarranty">质保查询</div>
                            <div @click="$router.push('/store')">线下渠道</div>
                            <div class="xians hoveron">
                                <div class="">
                                    线上渠道
                                </div>


                                <div class="online-tooltip">
                                    <a href="https://kdx.tmall.com/" target="_blank">
                                        <img src="/static/tmall.png" alt="天猫" />
                                    </a>
                                    <a href="https://mall.jd.com/index-12761077.html" target="_blank">
                                        <img src="/static/jd.png" alt="京东" />
                                    </a>
                                    <a href="https://mobile.yangkeduo.com/mall_page.html?ps=yNfvetbZn5" target="_blank">
                                        <img src="/static/pdd.png" alt="拼多多" />
                                    </a>
                                </div>

                            </div>
                        </div>
                        <div>
                            <div @click="$router.push('/aboutus')">品牌介绍</div>
                            <div @click="$router.push('/news')">新闻中心</div>
                            <div @click="goContact">联系我们</div>
                        </div>
                    </div>
                </div>
                <div class="rights">
                    <div>
                        <img class="erwei" :src="config.wechat_qrcode || '/static/erwei1.jpg'" />
                        <div class="ttt">微信公众号</div>
                    </div>
                    <div>
                        <img class="erwei" :src="config.mini_program_qrcode || '/static/erwei2.jpg'" />
                        <div class="ttt">KDX官方抖音号</div>
                    </div>
                    <div>
                        <img class="erwei" src="/static/erwei3.jpg" />
                        <div class="ttt">KDX官方小红书</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="di" @click="goo">
            {{ config.copyright || 'Copyright ©2025-2028 上海康得新晨诺光学材料有限公司 保留对网站内容的调整和最终解释权' }} {{ config.icp_info ||
                '沪ICP备2021001066号' }}
        </div>
    </div>
</template>

<script>
export default {
    name: 'Bottom',
    props: {
        config: {
            type: Object,
            default: () => ({})
        }
    },
    mounted() {
        this.setScale();
        window.addEventListener('resize', this.setScale);
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setScale);
    },
    methods: {
        goo() {
            window.open('https://beian.miit.gov.cn/', '_blank');
        },
        gohome() {
            this.$router.push('/');
        },
        setScale() {
            const designWidth = 1920;
            const designHeight = 1080;
            const scale = Math.min(
                window.innerWidth / designWidth,
                window.innerHeight / designHeight
            );
            document.documentElement.style.setProperty('--scale', scale);
        },
        goWarranty() {
            // 质保查询逻辑，可能是外部链接或特定页面
            window.open('https://qs.kdxwindowfilm.com/qualitySearch', '_blank');
        },
        goOnlineChannel() {
            // 线上渠道逻辑
            window.open('https://example.com/shop', '_blank');
        },
        goContact() {
            // 联系我们逻辑，跳转到关于我们页面的联系方式部分
            this.$router.push('/aboutus#contact');
        }
    }
}
</script>

<style scoped lang="less">
.xians {
    position: relative;
}

.hoveron:hover .online-tooltip {
    display: block !important;
    animation: fadeIn 0.3s ease;
}

.online-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: none;
    z-index: 100;
    width: 300px;
    text-align: center;

    &::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border-width: 8px;
        border-style: solid;
        border-color: white transparent transparent transparent;
    }

    a {
        display: inline-block;
        margin: 0 10px;

        img {
            width: 66px;
            height: 66px;
            transition: transform 0.3s;

            &:hover {
                transform: scale(1.2);
            }
        }
    }
}


/* 添加链接悬停效果 */
.left_n div div {
    cursor: pointer;
    transition: color 0.3s;
}

.left_n div div:hover {
    color: #c7000a;
    /* 使用您的主色调 */
}

/* 其他样式保持不变 */
.erwei {
    width: 150px;
    height: 150px;
    object-fit: cover;
}

.rights>div {
    width: 150px;
    margin: 0 20px
}

.ttt {
    color: white;
    text-align: center;
    font-size: 20px;
    margin-top: 15px;
}

.rights {
    float: right;
    display: flex;
    justify-content: center;
    justify-items: center;
}

.left_n {
    margin-top: 20px;
    font-size: 24px;
}

.centern>div {
    font-size: 28px;
}

.flexss {
    width: 501px;
    display: flex;
    color: white;
}

.flexss>div {
    flex: 1;
    line-height: 43px;
}

.over22w {
    overflow: hidden;
    margin-top: 50px;
}

.lefts {
    float: left;
}

.fuwu {
    display: flex;
    justify-content: left;
    justify-items: center;
    font-size: 26px;
    color: white;
    margin-top: 20px;
}

.fuwu>div {
    margin-right: 30px;
}

.gongsi {
    font-size: 26px;
    color: white;
    margin-top: 50px;
}

.di {
    background: rgb(18, 18, 18);
    color: white;
    text-align: center;
    line-height: 90px;
    display: block;
    margin-top: -1px;
    font-size: 20px;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.haders {
    position: relative;
    width: 100%;
}

.dibu {
    width: 100%;
    display: block;
}

.nei {
    position: absolute;
    width: 70%;
    height: 100%;
    bottom: 0;
    left: 50%;
    padding: 80px;
    box-sizing: border-box;
    transform: translateX(-50%);
}
</style>